<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">

    <ui:define name="title">
        SelectCheckboxMenu
    </ui:define>

    <ui:define name="description">
        SelectCheckboxMenu is used to choose multiple items displayed in an overlay.
    </ui:define>

    <ui:param name="documentationLink" value="/components/selectcheckboxmenu"/>
    <ui:param name="widgetLink" value="SelectCheckboxMenu-1"/>

    <ui:define name="implementation">
        <div class="card">
            <h:form>
                <p:growl>
                    <p:autoUpdate/>
                </p:growl>

                <h5 class="mt-0">Basic</h5>
                <p:selectCheckboxMenu id="menu"
                                      dynamic="true"
                                      filter="true" filterMatchMode="startsWith"
                                      label="Cities" updateLabel="true"
                                      selectedLabel="Item(s) Selected"
                                      style="width: 15rem" panelStyle="width: 15rem" scrollHeight="250"
                                      value="#{checkboxView.selectedCities}">
                    <f:selectItems value="#{checkboxView.cities}"/>

                    <f:facet name="footer">
                        <p:divider styleClass="mt-0" />
                        <h:outputText value="#{checkboxView.cities.size()} cities"
                                      styleClass="py-1 block font-bold"/>
                    </f:facet>
                </p:selectCheckboxMenu>

                <h5>Multiple</h5>
                <p:selectCheckboxMenu id="multiple"
                                      filter="true" filterMatchMode="startsWith"
                                      multiple="true" emptyLabel="Please select..." updateLabel="true"
                                      style="min-width: 15rem" panelStyle="width: 30rem" scrollHeight="250"
                                      value="#{checkboxView.selectedCities2}">
                        <p:ajax event="itemSelect" listener="#{checkboxView.onItemSelect}"/>
                        <p:ajax event="itemUnselect" listener="#{checkboxView.onItemUnselect}"/>
                        <f:selectItems value="#{checkboxView.cities}"/>
                    </p:selectCheckboxMenu>

                <h5>Grouped</h5>
                <p:selectCheckboxMenu id="grouped"
                                      filter="true" filterMatchMode="startsWith"
                                      multiple="true"
                                      style="width: 15rem" panelStyle="width: 15rem" scrollHeight="250"
                                      value="#{checkboxView.selectedCountries}">
                    <f:selectItems value="#{checkboxView.countries}"/>
                </p:selectCheckboxMenu>

                <h5>Advanced</h5>
                <p:selectCheckboxMenu id="advanced"
                                      converter="#{countryConverter}"
                                      filter="true" filterMatchMode="startsWith" filterNormalize="true"
                                      multiple="true"
                                      scrollHeight="250"
                                      value="#{checkboxView.selectedCountries2}"
                                      var="c"
                                      style="min-width: 15rem">
                    <f:selectItems value="#{checkboxView.countries2}"/>

                    <p:column style="width:10%">
                        <span class="flag flag-#{c.code}" style="width: 30px; height: 20px"/>
                    </p:column>

                    <p:column>
                        <f:facet name="header">
                            <h:outputText value="Name"/>
                        </f:facet>
                        <h:outputText value="#{c.name}"/>
                    </p:column>

                    <f:facet name="footer">
                        <h:outputText value="#{checkboxView.countries2.size()} countries"
                                      styleClass="py-1 block font-bold"/>
                    </f:facet>
                </p:selectCheckboxMenu>
            </h:form>
        </div>
    </ui:define>

</ui:composition>
